<template>
    <div id='generalization-index'>
       <!-- test -->
       <loading mode="full" v-if="loading"></loading>
       <h1 class="card-title">
            <span>概况概览</span>
       </h1>
       <div class="user-data loading-min-height">
            <transition name='fade'>
                <div>
                    <!-- <div class='couponsDetail'> -->
                            <!-- <span>{{daily.RegisterNow || placeholder}} / {{daily.RegisterAll || placeholder}}</span> -->
                           <!-- <span>2点券(芝麻分580以下)</span>
                    </div>  -->
                    <div class="total-count" v-if='scoreUser'>
                        <div class="user-data__item">
                            <span v-if='scoreUser.userCount'>{{scoreUser.userCount}}</span>
                            <span v-else>--</span>
                            <p>用户总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.auditorSuccCount'>{{scoreUser.auditorSuccCount}}</span>
                            <span v-else>--</span>
                            <p>审核通过用户总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.underReviewCount'>{{scoreUser.underReviewCount}}</span>
                            <span v-else>--</span>
                            <p>审核中的用户总数</p>
                        </div>
                        <div class="user-data__item">
                            <span v-if='scoreUser.chargeUserCount'>{{scoreUser.chargeUserCount}}</span>
                            <span v-else>--</span>
                            <p>已充值用户总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.chargeMoney'>{{scoreUser.chargeMoney}}</span>
                            <span v-else>--</span>
                            <p>充值总额</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.scoreGrant'>{{scoreUser.scoreGrant}}</span>
                            <span v-else>--</span>
                            <p>点券发放</p>
                        </div>    
                        <div class="user-data__item">
                            <span v-if='scoreUser.scoreConsume'>{{scoreUser.scoreConsume}}</span>
                            <span v-else>--</span>
                            <p>点券消耗</p>
                        </div>     
                        <div class="user-data__item">
                            <span v-if='scoreUser.scoreSurplus'>{{scoreUser.scoreSurplus}}</span>
                            <span v-else>--</span>
                            <p>点券剩余</p>
                        </div>  
                        <div class="user-data__item">
                            <span v-if='scoreUser.receiptCount'>{{scoreUser.receiptCount}}</span>
                            <span v-else>--</span>
                            <p>借条总数</p>
                        </div>     
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendRecordCount'>{{scoreUser.lendRecordCount}}</span>
                            <span v-else>--</span>
                            <p>出借记录总数</p>
                        </div>   
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendBrowseCount'>{{scoreUser.lendBrowseCount}}</span>
                            <span v-else>--</span>
                            <p>浏览出借总数</p>
                        </div>  
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendPublishCount'>{{scoreUser.lendPublishCount}}</span>
                            <span v-else>--</span>
                            <p>进件申请总数</p>
                        </div>  
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendBrowsePublishCount'>{{scoreUser.lendBrowsePublishCount}}</span>
                            <span v-else>--</span>
                            <p>浏览进件申请总次数</p>
                        </div>  
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendBuyPublishOrderCount'>{{scoreUser.lendBuyPublishOrderCount}}</span>
                            <span v-else>--</span>
                            <p>购买进件申请订单数</p>
                        </div>  
                        <div class="user-data__item">
                            <span v-if='scoreUser.lendBuyPublishOrderMoney'>{{scoreUser.lendBuyPublishOrderMoney |toYuan}}</span>
                            <span v-else>--</span>
                            <p>购买进件申请订单总金额</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.borrowRecordCount'>{{scoreUser.borrowRecordCount}}</span>
                            <span v-else>--</span>
                            <p>求借记录总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.borrowBrowseRecordCount'>{{scoreUser.borrowBrowseRecordCount}}</span>
                            <span v-else>--</span>
                            <p>浏览求借记录总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.borrowBuyOrderCount'>{{scoreUser.borrowBuyOrderCount}}</span>
                            <span v-else>--</span>
                            <p>购买求借订单总数</p>
                        </div> 
                        <div class="user-data__item">
                            <span v-if='scoreUser.borrowBuyOrderMoney'>{{scoreUser.borrowBuyOrderMoney |toYuan}}</span>
                            <span v-else>--</span>
                            <p>购买求借订单总金额</p>
                        </div> 
                    </div>
                   
                    
                  
                   
                  
                </div>
            </transition>
        </div>
        <!-- 第一组 -->
        <div style='width:88%;margin:30px 0px;border:1px solid #ddd;border-radius: 4px;'>
                <div class='padding-table'>
                    <table  width="100%">
                                    <thead class="table-list__head">
                                        <tr style='background:#00b1b3'>
                                            <th style='text-align:center;font-size:15px;color:#fff;'> </th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>新增注册用户</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>审核通过用户数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>充值人数</th>
                                            <!-- <th style='text-align:center;'>汇总</th> -->
                                            <th style='text-align:center;font-size:15px;color:#fff;'>首充用户人数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>充值金额</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>新增借条</th>
                                            <!-- 新增借条 -->
                                            <!-- <th style='text-align:right;'>总收入</th> -->
                                        </tr>
                                    </thead>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >昨日</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday.newUserCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.newUserCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserYesterday.auditorSuccCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.auditorSuccCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday.chargeCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.chargeCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday.firstChargeCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.firstChargeCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday.chargeMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.chargeMoney |toYuan}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserYesterday.newReceiptCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday.newReceiptCount}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >今日</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday.newUserCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.newUserCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserToday.auditorSuccCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.auditorSuccCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday.chargeCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.chargeCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday.firstChargeCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.firstChargeCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday.chargeMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.chargeMoney |toYuan}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserToday.newReceiptCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday.newReceiptCount}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                    </table>
                </div>
        </div>
        <!-- 第二组 -->
        <div style='width:88%;margin:30px 0px;border:1px solid #ddd;border-radius: 4px;'>
                <div class='padding-table'>
                    <table  width="100%">
                                    <thead class="table-list__head">
                                        <tr style='background:#00b1b3'>
                                            <th style='text-align:center;font-size:15px;color:#fff;'> </th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>发布求借</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>浏览求借次数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>浏览求借人数</th>
                                            <!-- <th style='text-align:center;'>汇总</th> -->
                                            <th style='text-align:center;font-size:15px;color:#fff;'>购买求借订单数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>求借订单总金额</th>
                                            <!-- 新增借条 -->
                                            <!-- <th style='text-align:right;'>总收入</th> -->
                                        </tr>
                                    </thead>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >昨日</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday1.borrowPublishCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday1.borrowPublishCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserYesterday1.borrowBrowseCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday1.borrowBrowseCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday1.borrowBrowsePersonCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday1.borrowBrowsePersonCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday1.borrowBuyOrderCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday1.borrowBuyOrderCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday1.borrowBuyOrderMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday1.borrowBuyOrderMoney | toYuan}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >今日</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday1.borrowPublishCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday1.borrowPublishCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserToday1.borrowBrowseCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday1.borrowBrowseCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday1.borrowBrowsePersonCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday1.borrowBrowsePersonCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday1.borrowBuyOrderCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday1.borrowBuyOrderCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday1.borrowBuyOrderMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserToday1.borrowBuyOrderMoney |toYuan}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                    </table>
                </div>
        </div>
        <!-- 第三组 -->
        <div style='width:88%;margin:30px 0px;border:1px solid #ddd;border-radius: 4px;'>
                <div class='padding-table'>
                    <table  width="100%">
                                    <thead class="table-list__head">
                                        <tr style='background:#00b1b3'>
                                            <th style='text-align:center;font-size:15px;color:#fff;'> </th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>发布出借</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>小C浏览出借的次数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>小C进件申请次数</th>
                                            <!-- <th style='text-align:center;'>汇总</th> -->
                                            <th style='text-align:center;font-size:15px;color:#fff;'>浏览进件申请的次数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>浏览进件申请的人数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>购买进件申请订单数</th>
                                            <th style='text-align:center;font-size:15px;color:#fff;'>进件申请订单总金额</th>
                                            <!-- 新增借条 -->
                                            <!-- <th style='text-align:right;'>总收入</th> -->
                                        </tr>
                                    </thead>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >昨日</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday2.lendPublishCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendPublishCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserYesterday2.lendBrowseCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendBrowseCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday2.lendApplyCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendApplyCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday2.lendBrowseApplyCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendBrowseApplyCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserYesterday2.lendBrowseApplyPersonCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendBrowseApplyPersonCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserYesterday2.lendBuyApplyOrderCount==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendBuyApplyOrderCount}}</span>
                                            </td>
                                             <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserYesterday2.lendBuyApplyOrderMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserYesterday2.lendBuyApplyOrderMoney |toYuan}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tbody class="table-list__head">
                                        <tr >
                                            <td style='text-align:center;width:30px;padding-left:10px;'>
                                                <span >今日</span>
                                            </td>
                                           <td style='text-align:center;'>
                                                <span v-if='scoreUserToday2.lendPublishCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendPublishCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- <span >{{scoreUserYesterday.auditorSuccCount}}</span> -->
                                                <span v-if='scoreUserToday2.lendBrowseCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendBrowseCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday2.lendApplyCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendApplyCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday2.lendBrowseApplyCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendBrowseApplyCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <span v-if='scoreUserToday2.lendBrowseApplyPersonCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendBrowseApplyPersonCount}}</span>
                                            </td>
                                            <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserToday2.lendBuyApplyOrderCount==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendBuyApplyOrderCount}}</span>
                                            </td>
                                             <td style='text-align:center;'>
                                                <!-- newReceiptCount -->
                                                <span v-if='scoreUserToday2.lendBuyApplyOrderMoney==undefined'>--</span>
                                                <span v-else>{{scoreUserToday2.lendBuyApplyOrderMoney |toYuan}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                    </table>
                </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'
    import echarts from 'echarts'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        data() {
            return {
                scoreUser:{},
                scoreUserToday:{},
                scoreUserYesterday:{},
                loading:true,
                scoreUserToday1:{},
                scoreUserYesterday1:{},
                scoreUserToday2:{},
                scoreUserYesterday2:{}
            }
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },
            OverviewfindAllI(){
                this.loading = true
                allApi.OverviewfindAll()
                .then(result=>{
                    this.loading = false
                    this.scoreUser=result.firstGroup
                    this.scoreUserToday=result.twoGroupToday.TheFirstLine
                    this.scoreUserYesterday=result.twoGroupYesterday.TheFirstLine
                    this.scoreUserToday1=result.twoGroupToday.TheSecondLine
                    this.scoreUserYesterday1=result.twoGroupYesterday.TheSecondLine
                    // this.loading = false
                    this.scoreUserToday2=result.twoGroupToday.TheThirdLine
                    this.scoreUserYesterday2=result.twoGroupYesterday.TheThirdLine
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            mit(){
                console.log(this.scoreUserYesterday.userCount==undefined)
            }

        },
        created(){
                this.OverviewfindAllI()
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #generalization-index{
        .thead-border{
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
            // height: 300px;
        }
        .list-main{
            // width: 90%;
            // background: red;
            height: 200px;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            box-sizing: border-box;
            border: 1px solid $sectionColor;
        }
        // .new-css{
        //     display: inline-block;
        //     width:108px;
        //     padding:20px 0;
        //     font-size: 15px;
        //     border: 1px solid #ddd;
        // }
        .couponsDetail{
            margin: 10px 0;
            // display: inline-block;
            color:#00B1B3;
            width: 260px;
            height: 50px;
            line-height: 50px;
            box-sizing: border-box;
            border: 1px solid $sectionColor;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            // span{
                // margin:0 80px;
            // }
            // overflow: auto;
            text-align: center;
        }
        padding:0 40px 20px 0px;
        box-sizing:border-box;
        overflow:auto;
        .data-chart{
            padding-top: 20px;
        }
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 180px;
            padding:10px 0;
            box-sizing: border-box;
            margin-bottom: 15px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
                padding-left: 10px;
                padding-right: 10px;
            }
            p{
                padding: 10px;
                padding-bottom: 0;
                line-height:1.3;
            }
        }
    }
</style>
